<template>
  <div class="main">
    <div class="header">
      <img class="header-pic" src="../../assets/pic/farmerHeader.jpg" alt="">
      <div class="user-Avatar-container">
        <el-avatar class="user-Avatar" :size="80" :src="circleUrl"></el-avatar>
        <div class="username">{{loginUser.username}}</div>
      </div>
    </div>
    <div class="body">
<!--      <div>-->
<!--        <el-divider content-position="left">货运信息</el-divider>-->
<!--      </div>-->
<!--      <div>-->
<!--        <el-divider content-position="left">近期购买商品</el-divider>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "FarmerMain",
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    }
  },
  computed:{
    ...mapState('user',['loginUser'])
  }
}
</script>

<style scoped>

.header{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.header-pic{
  width: 100%;
  margin-top: -180px;
}

.user-Avatar-container{
  position: absolute;
  bottom: 10%;
  left: 40px;
}

.user-Avatar{
  float: left;
}

.username{
  color: white;
  float: left;
  height: 80px;
  line-height: 80px;
  font-size: 25px;
  font-weight: bolder;
  margin-left: 20px;
}

.body{
  margin: 20px;
}
</style>